File Selector

File Selector

The File selector component allows the user to select file(s) from a user’s file system. Either natively using an file input or drag and drop.

Base

Preview

No content has been added for this component.

No content has been added for this component.

<div class="slds-form-element">
  <span class="slds-form-element__label" id="file-selector-id">Attachment</span>
  <div class="slds-form-element__control">
    <div class="slds-file-selector slds-file-selector_files">
      <div class="slds-file-selector__dropzone">
        <input type="file" class="slds-file-selector__input slds-assistive-text" accept="image/png" id="file-upload-input-01" aria-describedby="file-selector-id" />
        <label class="slds-file-selector__body" for="file-upload-input-01">
          <span class="slds-file-selector__button slds-button slds-button_neutral">
            <svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#upload"></use>
            </svg>Upload Files</span>
          <span class="slds-file-selector__text slds-medium-show">or Drop Files</span>
        </label>
      </div>
    </div>
  </div>
</div>

Overview of CSS Classes

Selector.slds-file-selector
Summary
Restrictdiv
VariantTrue
Selector.slds-file-selector__dropzone
Summary

Region that a file can be dropped within

Restrict.slds-file-selector div
Selector.slds-has-drag-over
Summary
Restrict.slds-file-selector__dropzone
ModifierTrue
Selector.slds-file-selector__input
Summary

Hidden input element

Restrict.slds-file-selector input
Selector.slds-file-selector__button
Summary

Faux button

Restrict.slds-file-selector button, .slds-file-selector span
Selector.slds-file-selector_files
Summary

Modifications based on context

Single Line Dedicated dropzone when there are multiple dropzones in the form or when the input is positioned among other form inputs.

Restrict.slds-file-selector
Selector.slds-file-selector__body
Summary

Container for file selector content, specifically within the dropzone

Restrict.slds-file-selector label
Selector.slds-file-selector__text
Summary

Descriptive call back text

Restrict.slds-file-selector span
Selector.slds-file-selector_images
Summary

Multi Line / Image

Use as a dedicated dropzone for image files only. May require a cropping control.

Restrict.slds-file-selector
VariantTrue
Selector.slds-file-selector_integrated
Summary

Invisible Dropzone (Container)

Use when an entire container should be droppable. The container should have a visible boundary, like a modal, composer, or page.

Restrict.slds-file-selector
VariantTrue
Selector.slds-file-selector__dropzone_integrated
Summary

Specific to integrated file selector — region that a file can be dropped within

Restrict.slds-file-selector_integrated div
Selector.slds-has-drag
Summary

Informs dropzone that file has been dragged into the viewport

Restrict.slds-file-selector__dropzone_integrated
ModifierTrue
Selector.slds-file-selector__body_integrated
Summary

Specific to integrated file selector — container for file selector content, specifically within the dropzone

Restrict.slds-file-selector_integrated label
Selector.slds-file-selector__text_integrated
Summary

Specific to integrated file selector — Descriptive call back text

Restrict.slds-file-selector_integrated span